<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">

    <!-- 删除默认的苹果工具栏和菜单栏 ： 即启用 WebApp 全屏模式  -->
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <!-- 在web app应用下状态条（屏幕顶部条）的颜色；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <title>中新生态城24小时空气质量趋势</title>

    <script src="https://vuejs.org/js/vue.js"></script>
    <script src="https://gitee.com/libinos/AirviewPlatform/raw/master/extlib/echarts/echarts.js"></script>
    <!--<script src="extlib/echarts/echarts.js"></script>-->

    <script src="http://api.map.baidu.com/api?v=2.0&ak=bXD2LO0j2HgnWVZMXx2g5FeExhoV8HVD"></script>
    <script src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.1.2/js/jquery-weui.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">

    <style>
        *{
            -webkit-box-sizing: border-box;
            -moz-box-sizing:border-box;
            box-sizing: border-box;
            padding: 0;
            margin:0;
        }
        #airQuality::-webkit-scrollbar,
        .nav-tabs::-webkit-scrollbar{
            width:0;
            height:0;
            color:transparent;
        }
        #myTabs{
            width: max-content;
            white-space: nowrap;
            padding: 6px 0;
            display: -webkit-box;
            overflow-x: scroll;
        }
        #tab_ci,#tab_aqi,#tab_pm25,#tab_pm10,#tab_co,#tab_o3,#tab_so2,#tab_no2{
            display: inline-block;
        }

        #myTabs li.active{
            border-bottom: 2px solid red;
        }
        #myTabs li a{
            margin: 0 auto;
            padding:10px 0;
            width: 3.5rem;
        }
        #myTabs>li.active>a{
            border:1px solid #fff;
            font-weight: bold;
            color: red;
        }
        ul.nav-tabs>li{
            border:none;
            display: inline-block;
            text-align: center;
        }
        .context{
            width: 100%;
        }

    </style>
</head>
<body ontouchstart style="height:100%;">
<div class="container">
    <div class="row">
        <div id="airQuality" class="bs-example bs-example-tabs" data-example-id="togglable-tabs" style="overflow-x:scroll;white-space: nowrap;">
            <ul id="myTabs" class="nav nav-tabs" role="tablist">
                <li id="li_ci" role="presentation" class="active">
                    <a href="#ci" id="tab_ci" role="tab" data-toggle="tab" aria-controls="ci" aria-expanded="true" class="active">综指</a>
                </li>
                <li id="li_aqi" role="presentation">
                    <a href="#aqi" id="tab_aqi" role="tab" data-toggle="tab" aria-controls="aqi" aria-expanded="true">AQI</a>
                </li>
                <li id="li_pm25" role="presentation">
                    <a href="#pm25" id="tab_pm25" role="tab" data-toggle="tab" aria-controls="pm25" aria-expanded="true">PM2.5</a>
                </li>
                <li id="li_pm10" role="presentation">
                    <a href="#pm10" id="tab_pm10" role="tab" data-toggle="tab" aria-controls="pm10" aria-expanded="true">PM10</a>
                </li>
                <li id="li_co" role="presentation">
                    <a href="#co" id="tab_co" role="tab" data-toggle="tab" aria-controls="co" aria-expanded="true">CO</a>
                </li>
                <li id="li_o3" role="presentation">
                    <a href="#o3" id="tab_o3" role="tab" data-toggle="tab" aria-controls="o3" aria-expanded="true">O3</a>
                </li>
                <li id="li_so2" role="presentation">
                    <a href="#so2" id="tab_so2" role="tab" data-toggle="tab" aria-controls="so2" aria-expanded="true">SO2</a>
                </li>
                <li id="li_no2" role="presentation">
                    <a href="#no2" id="tab_no2" role="tab" data-toggle="tab" aria-controls="no2" aria-expanded="true">NO2</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="context"></div>
    <div id="trendChart" class="row"  style="height: 500px; margin: 0;"></div>
</div>

<script type="text/javascript">
    // 初始化数据绑定
    // 初始化地图
    var myChart = echarts.init(document.getElementById('trendChart'));

    option = {
        grid: {
            top:50,
            left:25,
            right:15,
            bottom:50,
            containLabel:false
        },
        tooltip: {
            trigger: 'axis'
            /*axisPointer: {
                type: 'cross'
            }*/
        },
        legend:{
            left: 'left',
            data: [
                {
                    name: '中新生态城',
                    icon: 'emptyCircle'
                },
                {   name: '天津市',
                    icon: 'emptyRect'
                }],
            show: true
        },

        xAxis: {
            type: 'category',
            scale: true,
            name: '中心生态城空气质量指数',
            nameLocation: 'center',
            nameGap: '30',
            nameTextStyle: {
                fontSize: 18
            },
            boundaryGap: false,
            splitLine: {
                show: true
            },
            axisTick: {
                alignWithLabel: true
            }
        },
        yAxis: [
            {
                scale: true,
                // interval: 50,
                //show: true,
                //min: 0,
                //max: 300,
                //position: 'right',
                splitLine: {
                    show: false
                },
                //左边栏数字
                axisLabel: {
                    show: true
                }
            },
            {

                type: 'category',
                //position: 'left',

                axisTick: {
                    show: true
                },
                splitLine: {
                    show: true
                },
                splitArea: {
                    show: true,
                    areaStyle:{
                        /* color:['#00FF00','#FFFF00','#FF7F00','#FF0000','#8E236B','#B34D4D']*/

                    }
                }
                //date: []
            }],
        dataZoom: [
            {
                type: 'inside',
                start: 50,
                end: 100
            }
            /*{
                show: true,
                type: 'slider',
                y: '92%'
            }*/
        ],

        visualMap: {
            /*pieces:[]*/
        /*pieces: []
         minValue: minV,
         maxValue: maxV*!/
         minValue:undefined ,
         maxValue:undefined ,*/
            show:false,
            pieces:[
                {
                    "min":0.0,
                    "max":4.0,
                    "label":"优",
                    "color":"#58C750"},
                {
                    "min":4.0,
                    "max":6.0,
                    "label":"良",
                    "color":"#E3CA55"},
                {
                    "min":6.0,
                    "max":7.0,
                    "label":"轻度污染",
                    "color":"#D99157"}
            ]
            /* outOfRange: {
             color: '#999'
             }*/
        },
        series: [
            {
                name: '中新生态城',
                type: 'line',
                lineStyle: {
                    normal: {
                        //color: "#999999",
                        width: 1
                    }
                },
                smooth: true,
                barWidth: 25,
                symbolSize: 8, //拐点大小
                label: {
                    normal: {
                        show: true
                        //position: 'top'
                        //color: '#45A9FF'
                    }
                },
                data: []
            },
            {
                name: '天津市',
                type: 'line',
                lineStyle: {
                    normal: {
                        color: "#4d77ff",
                        width: 1
                    }
                },
                smooth: true,
                barWidth: 25,
                symbolSize: 8, //拐点大小
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        color: '#4d77ff'
                    }
                },
                data: []
            }
        ]
    };



    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);


    var baseURL = "http://dev2.airsensor.org/airapi/chart/TianjingByStation/";
    function getTrendData(name) {
        // axios.get(baseURL+name).then(function (response) {

        $.ajax({
            type: "get",
            async: true,
            cache:true,
            url: baseURL + name,
            //使用于get请求
            dataType: "jsonp",
            jsonp: "callback",
            //使用于post请求
/*            dataType:'json',
            xhrFields:{
                withCredentials:true
            },*/
            success: function (data) {
                console.log(data);
                // update trend date
                // d1=[20, 10, 30, 5, 9, 20, 20, 50, 20, 20, 20, 40, 20, 20, 20, 20, 20, 10, 20, 20, 20, 5, 20, 20];
                // d2=[5, 6, 2, 5, 9, 20, 2, 50, 20, 20, 20, 10, 20, 20, 20, 8, 20, 10, 20, 20, 20, 5, 20, 1];
                ecoCity = data.series[0].data;
                tj = data.series[1].data;
                category = data.category;
               // pie = date.pieces;
                minV = data.minValue;
                maxV = data.maxValue;
                var minValue = minV;
                var maxValue = maxV;
                var pieces = [];
                var visualMap = pieces;
                for (var i = 0; i < data.pieces.length; i++) {
                    pieces.push(data.pieces[i]);

                }
                /*myChart.setOption(option);*/

                /*d1 = [];
                for (var i = 0; i < date.series[0].date[i].length; i++) {
                    d1.push([date.series[0].date[i]]);
                }
                myChart.setOption({series: [{date: d1}]});

                d2 = [];
                for (var i = 0; i < date.series[1].date[i].length; i++) {
                    d2.push([date.series[1].date[i]]);
                }
                myChart.setOption({series: [{date: d2}]});*/

                updatedOption = {
                    xAxis: [
                        {
                            type: 'category',
                            data: category
                        }],
                    series: [
                        {
                            name: '中新生态城',
                            type: 'line',
                            data: ecoCity
                        },
                        {
                            name: '天津市',
                            type: 'line',
                            data: tj
                        }],
                    visualMap: {
                            minValue: minV,
                            maxValue: maxV,
                            pieces: pieces
                        }
                };

                myChart.setOption(updatedOption)
            },
            error: function () {
                $.toast("获取数据失败");
            }
        });
    }

    $('#myTabs a').click(function (e) {
        e.preventDefault();
        if(this.id=='tab_ci'){
            $('#li_ci').addClass('active')
            $('#li_aqi').removeClass('active')
            $('#li_pm25').removeClass('active')
            $('#li_pm10').removeClass('active')
            $('#li_co').removeClass('active')
            $('#li_o3').removeClass('active')
            $('#li_so2').removeClass('active')
            $('#li_no2').removeClass('active')
            getTrendData('COMPINDEX');
        }else if(this.id=="tab_aqi"){
            $('#li_ci').removeClass('active')
            $('#li_aqi').addClass('active')
            $('#li_pm25').removeClass('active')
            $('#li_pm10').removeClass('active')
            $('#li_co').removeClass('active')
            $('#li_o3').removeClass('active')
            $('#li_so2').removeClass('active')
            $('#li_no2').removeClass('active')
            getTrendData('AQI');
        }else if(this.id=="tab_pm25"){
            $('#li_ci').removeClass('active')
            $('#li_aqi').removeClass('active')
            $('#li_pm25').addClass('active')
            $('#li_pm10').removeClass('active')
            $('#li_co').removeClass('active')
            $('#li_o3').removeClass('active')
            $('#li_so2').removeClass('active')
            $('#li_no2').removeClass('active')
            getTrendData('PM25');
        }else if(this.id=="tab_pm10"){
            $('#li_ci').removeClass('active')
            $('#li_aqi').removeClass('active')
            $('#li_pm25').removeClass('active')
            $('#li_pm10').addClass('active')
            $('#li_co').removeClass('active')
            $('#li_o3').removeClass('active')
            $('#li_so2').removeClass('active')
            $('#li_no2').removeClass('active')
            getTrendData('PM10');
        }else if(this.id=="tab_co"){
            $('#li_ci').removeClass('active')
            $('#li_aqi').removeClass('active')
            $('#li_pm25').removeClass('active')
            $('#li_pm10').removeClass('active')
            $('#li_co').addClass('active')
            $('#li_o3').removeClass('active')
            $('#li_so2').removeClass('active')
            $('#li_no2').removeClass('active')
            getTrendData('CO');
        }else if(this.id=="tab_o3"){
            $('#li_ci').removeClass('active')
            $('#li_aqi').removeClass('active')
            $('#li_pm25').removeClass('active')
            $('#li_pm10').removeClass('active')
            $('#li_co').removeClass('active')
            $('#li_o3').addClass('active')
            $('#li_so2').removeClass('active')
            $('#li_no2').removeClass('active')
            getTrendData('O3');
        }else if(this.id=="tab_so2"){
            $('#li_ci').removeClass('active')
            $('#li_aqi').removeClass('active')
            $('#li_pm25').removeClass('active')
            $('#li_pm10').removeClass('active')
            $('#li_co').removeClass('active')
            $('#li_o3').removeClass('active')
            $('#li_so2').addClass('active')
            $('#li_no2').removeClass('active')
            getTrendData('SO2');
        }else if(this.id=="tab_no2"){
            $('#li_ci').removeClass('active')
            $('#li_aqi').removeClass('active')
            $('#li_pm25').removeClass('active')
            $('#li_pm10').removeClass('active')
            $('#li_co').removeClass('active')
            $('#li_o3').removeClass('active')
            $('#li_so2').removeClass('active')
            $('#li_no2').addClass('active')
            getTrendData('NO2');
        }
    });
    getTrendData('COMPINDEX');

</script>
</body>

</html>